<template>
  <!-- :loading="loading" -->
  <el-skeleton style="width: 240px" :loading="loading" animated :throttle="500">
    <template #template>
      <el-skeleton-item variant="image" style="width: 240px; height: 240px" />
      <div style="padding: 14px">
        <el-skeleton-item variant="h3" style="width: 50%" />
        <div
          style="
            display: flex;
            align-items: center;
            justify-items: space-between;
            margin-top: 16px;
            height: 16px;
          "
        >
          <el-skeleton-item variant="text" style="margin-right: 16px" />
          <el-skeleton-item variant="text" style="width: 30%" />
        </div>
      </div>
    </template>
  </el-skeleton>
</template>

<script setup lang="ts">
import { defineProps, withDefaults } from "vue";
withDefaults(
  defineProps<{
    loading: boolean;
  }>(),
  {
    loading: true,
  }
);
</script>

<style lang="scss" scoped></style>
